<!--评论页面&评论管理-->
<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">顾客留言</span>
  </div>
  <!-- 分店评论搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="查看其它分店" style="width:250px;">
        <el-select placeholder="请选择分店" v-model="searchForm.branchId" @change="loadCommentDate">
          <el-option v-for="item in branchOptions"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadCommentDate">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:20px;">
        <el-row gutter="20">
          <el-col span="12">
            <img :src="BASE_URL+branchInfo.imgUrl" width="500px"  style="margin-left: 60px"/>
          </el-col>
          <el-col span="10">
            <div class="branch_list">
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><Shop/></el-icon>
                餐厅：{{branchInfo.name}}
              </p>
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><ForkSpoon /></el-icon>
                营业时间：{{branchInfo.workTimeStart}} - {{branchInfo.workTimeEnd}}
              </p>

              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><LocationInformation /></el-icon>
                位置信息：{{branchInfo.address}}
              </p>
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><Phone /></el-icon>
                联系电话：{{branchInfo.phone}}
              </p>
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><Collection-tag /></el-icon>
                餐厅介绍：{{branchInfo.description}}
              </p>
            </div>
          </el-col>
        </el-row>
  </el-card>
  <el-card style="margin:20px;" v-for="item in branchInfo.commentVOList" >
    <div slot="header">
      <span>{{"评论人:"+item.username}}</span>
<!--      根据评分回显 5个星星-->
      <el-rate v-model="item.score" disabled show-text text-color="#ff9900" style="margin-left: 40px"></el-rate>
      <span style="float: right; padding: 3px 0">{{"评论时间:"+item.createTime}}</span>
    </div>
    <div style="margin-top: 20px">
      <span style="font-size: 14px;color: #999;">{{"评论内容："+item.content}}</span>
<!--      评论状态显示和删除按钮-->
      <div style="margin-top: 10px; display: flex; justify-content: space-between;">
        <el-switch
            active-value="0"
            inactive-value="1"
            v-model="item.status"
            @change="changeStatus(item.id, item.status)"
        ></el-switch>
        <el-button type="danger" size="small" @click="deleteComment(item.id)">删除</el-button>
      </div>
    </div>
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//获取当前登录的用户信息
const user = ref(getUser());
// 搜索条件
const searchForm = ref({
  branchId: user.value.branchId
})
//一进到页面就立即执行加载评论数据的方法
onMounted(()=>{
  loadCommentDate();
  getBranchs(branchOptions);
})
// 定义展示分店以及评论的对象
const branchInfo= ref({});
// 定义加载评论数据的方法
const loadCommentDate = ()=> {
  axios.get(BASE_URL+'/v1/branch/selectBranchComment?branchId='+searchForm.value.branchId)
  .then((response)=>{
    if(response.data.code===2000){
      branchInfo.value=response.data.data;
      console.log(branchInfo.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}

// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};
// 重置搜索条件
const resetSearch = ()=>{
  searchForm.value.branchId = user.value.branchId;
  loadCommentDate();
}
// 修改评论状态（禁用/启用）
const changeStatus = (id,status)=> {
  // 0 启用 1 禁用
  const message = (status === '1' ? '您确认要禁用该评论吗?' : '您确认要启用该评论吗?');
  if (confirm(message)){
    axios.post(BASE_URL+'/v1/comment/save',qs.stringify({id:id,status:status}))
    .then((response)=>{
      if(response.data.code===2000){
        ElMessage.success("修改成功");
        loadCommentDate();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
  // 当用户取消确认，则刷新页面，否者状态将会在前端发生改变
  loadCommentDate();

}
// 删除评论
const deleteComment = (id)=>{
  if(confirm('您确认要删除该评论吗?')){
    axios.post(BASE_URL+'/v1/comment/deleteById/'+id)
    .then((response)=>{
      if(response.data.code===2000){
        ElMessage.success("删除成功");
        loadCommentDate();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }

}

</script>

<style scoped>
.branch_list{
  //width: 400px;
  //height: 500px;
  border-bottom-style: dashed;
  border-width: 0;
  cursor:pointer;
}
.branch_list_p{
  font-size: 14px;
  color: #999;
  margin-top: 50px;
  margin-left: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>